<template>
	<view class="page">
		<view class="pageContent">
			<scrollYBox styleText="height: calc( 100vh - 450rpx ) ;" @scrolltolower="scrolltolower" :list="list">
					<template>
						<view style="padding-bottom: 50rpx;padding-top: 20rpx;">
							<view class="selectBox" style="padding-bottom: 50rpx;">
								<view class="selectItem" v-for="(item,index) in list" :key="index" @click="handleSelectItem(index)">
									<view class="icon">
										<u-radio-group v-model="item.checked">
											<u-radio :name="true" ></u-radio>
										</u-radio-group>
									</view>
									
									<view class="image">
										<image :src="imgBaseUrl3+item.pic"></image>
									</view>
										
										<view class="infoBox">
											<view class="name">
												{{item.commodityName}}
												<text >{{item.specificationNames}}</text>
											</view>
											
											
											<view class="row">
											<text >{{item.num}}件</text>
											<text class="moneyText red">￥{{item.price}}</text>
											</view>
											
										</view>
										
								</view>
							</view>
						</view>
					</template>
			</scrollYBox>
		</view>
		<view class="row rowTotal">
			<view class="label">
				{{'合计'}}:
			</view>
			<view class="text red" style="font-weight: 600;font-size: 46rpx;margin-left: 30rpx;">
				{{totalMoney}}
			</view>
		</view>
		
		<view class="btn" @click="handlePay">
			<text>{{'购买'}}</text>
		</view>
		<uniformshoptabbarVue ref="uniformshoptabbarVue"></uniformshoptabbarVue>
	</view>
</template>

<script>
	import uniformshoptabbarVue from "./uniformshoptabbar.vue";
	export default {
		components:{
			uniformshoptabbarVue
		},
		data() {
			return {
				list:[],
				
				selectProductId: ''
			}
		},
		computed: {
			totalMoney(){
				let num = 0
				let selectProductId = []
				this.list.forEach(item=>{
					if(item.checked){
						num+=item.price
						selectProductId.push(item.id)
					} 
				})
				this.selectProductId = selectProductId
				return num
			}
		},
		methods: {
			handleSelectItem(index){
				console.log(this.list[index]);
				let item = this.list[index]
				item.checked = !item.checked
				this.$set(this.list,index,item)
			},
			handlePay(){
			    let selectList = this.list.filter(item=>{
					return item.checked==true
				})
				if(!selectList.length) return this.setMessage('请先选择购物车的校服')
				

				this.goPage('/pages/componentsC/uniformshop/uniformshopPay',{item:JSON.stringify(selectList),isCart:true})
			},
			onLoad() {
				let temp0 = uni.getStorageSync("shopcart");
				let temp = JSON.parse(temp0);
				
				console.log(temp)
				for(let i = 0;i<temp.length;i++){
					temp[i].checked = false;
					this.list.push(temp[i]);
				}
				

			
			},
			onShow() {
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.red{
		color: #fe415c !important;
	}
	.page{
		height: 100vh;
		background-color: #fff;
		.pageContent{
		  background-color: #f1f1f1;
			
		}
		
		.rowTotal{
			border-top: 2rpx solid rgba(102,102,102,0.15);
			background: #fff;
			// box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.15);
		}
		.row{
			display: flex;
			align-items: center;
			height: 90rpx;
			border-bottom: 2rpx solid #f1f1f1;
			padding-left: 30rpx;
			.label{
				// margin: 0 20rpx;
			}
		
		}
		.red{
			color: #fe415c;
		}
		.btn{
			margin: 20rpx auto 0;
			background: #2d8cf6;
			@include flexCenter;
			width: 90vw;
			height: 92rpx;
			border-radius: 10rpx;
			text{
				color: #fff;
			}
		}
		
		.selectBox{
			padding-top: 20rpx;
		}
		.selectItem{
			background-color: #fff;
			margin: 0 30rpx 30rpx;
			border-radius: 8rpx;
			padding: 10rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.35);
			padding: 20rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			.icon{
				display: flex;
				align-items: center;
				width: 50rpx;
			}
			.image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
			.infoBox{
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				flex: 1;
				text{
					color: #c2c2c2;
					// flex: 1;
					display: flex;
					align-items: center;
				}
				.name{
					font-size: 36rpx;
				}
				.moneyText{
					// flex: 1;
					font-size: 38rpx;
				}
			}
			
		}
	}
</style>